<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findData" />

    <h1 class="f16">查询条件</h1>
    <Find :OriginalFilter="{ static: true }" :searchImg="false" style="margin-bottom: 10px" :formList="formList1" @findClicked="findData" />
    <div style="display: flex">
      <div style="width: 60%">
        <h1 class="f16">结算应付汇总查询</h1>
        <Table :tableHeader="tableHeader" :tableData="tableData" :outTableHeight="130" />
      </div>
      <div style="width: 20%; margin-left: 15px">
        <h1 class="f16">结算应付汇总/月份</h1>
        <Table :tableHeader="tableHeader1" :tableData="tableData" :outTableHeight="130" />
      </div>
      <div style="margin-left: 15px; width: 30%">
        <h1 class="f16">付款明细/月份</h1>
        <Table :tableHeader="tableHeader2" :tableData="tableData" :outTableHeight="130" />
      </div>
    </div>
    <PageModule :PageData="{ total: 500 }" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'AnnualInquiryPayable'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import type { formListType } from '@/components/Find/index.vue'
import { ref } from 'vue'

const formList = ref<any>([
  {
    type: 'select',
    selectValue: '',
    selectP: '结算类型',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '厂商',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '结算年份',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '清空'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  },
  {
    type: 'button',
    checkboxLabel: '导出对账统计表'
  }
])

const formList1 = ref<any>([
  {
    type: 'input',
    inputPlaceholder: '单据号码',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '厂商',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '付款日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  },
  {
    type: 'checkbox',
    checkboxLabel: '大于0',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '小于0',
    checked: true
  }
])

const findData = () => {}

// 表格数据
const tableData = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  }
]

const tableHeader = ref([
  {
    label: '厂商',
    prop: 'slipNo'
  },
  {
    label: '账期',
    prop: 'slipDate'
  },
  {
    label: '结算年份',
    prop: 'dutyDeptName'
  },
  {
    label: '总金额',
    prop: 'sysUser'
  },
  {
    label: '未对账金额',
    prop: 'dutyMemo'
  },
  {
    label: '已对账金额',
    prop: 'dutyMemo'
  },
  {
    label: '已付金额',
    prop: 'dutyMemo'
  },
  {
    label: '未付金额',
    prop: 'dutyMemo'
  },
  {
    label: '到期未付',
    prop: 'dutyMemo'
  },
  {
    label: '逾期未付',
    prop: 'dutyMemo'
  }
])

const tableHeader1 = ref([
  {
    label: '结算月份',
    prop: 'slipNo'
  },
  {
    label: '已对账金额',
    prop: 'slipDate'
  },
  {
    label: '已付金额',
    prop: 'dutyDeptName'
  },
  {
    label: '未付金额',
    prop: 'sysUser'
  }
])

const tableHeader2 = ref([
  {
    label: '单据号码',
    prop: 'slipNo'
  },
  {
    label: '厂商名称',
    prop: 'slipDate'
  },
  {
    label: '付款日期',
    prop: 'dutyDeptName'
  },
  {
    label: '金额',
    prop: 'sysUser'
  },
  {
    label: '备注',
    prop: 'dutyMemo'
  },
  {
    label: '操作员',
    prop: 'dutyMemo'
  }
])

const handleSizeChange = (val: number) => {}
const handleCurrentChange = (val: number) => {}
</script>

<style lang="less" scoped>
h1 {
  font-size: 14px;
}
</style>
